/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-07 21:09:45
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-09 17:24:39
 * @FilePath: \Webgl-basic\src\6.绘制正三角形.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import {
    initShader,
    createBufferTriangle
} from '../lib/index'
const canvas = document.querySelector('canvas')
//获取webgl上下文
const gl = canvas.getContext('webgl')
//定义点顶点着色器(字符串)
const vs_shader = /*glsl*/ `
  // 指定浮点数精度为中等精度  
  precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
  attribute vec4 a_Position;
  //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
  void main(){
    //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
    gl_Position=a_Position;

  }`
//片元着色器
const fs_shader = /*glsl*/ `
precision mediump float;
void main(){
    //gl_FragColor是最后输出的像素颜色,是一个四维的数据
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);            
}`
//编译着色器,生成程序对象  操作手，专门负责javaScript和shader着色器的通讯
const program = initShader(gl, vs_shader, fs_shader)
gl.program = program
// const a_Position = gl.getAttribLocation(program,'a_Position')
let points = new Float32Array([-0.5,0.5, -0.5, -0.5, 0.5,0.5, 0.5,-0.5])
const n = createBufferTriangle(gl, points,"a_Position")
//三角带方式绘制矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)